$color: blue;
// //声明
// @mixin bc {
//     background: $color;
// }
// //调用
// div {
//     @include bc;
// }
// $top:50%;
// $left:50%;
//混合宏
// @mixin pa($top:50px, $left:50px) {
//     position: absolute;
//     top: $top;
//     left: $left;
// }
// div {
//     @include pa;
// }
// span {
//     @include pa(300px, 200px);
// }
//继承
// .test {
//     position: absolute;
//     top: 50%;
//     left: 50%;
// }
// div {
//     width: 300px;
//     height: 300px;
//     @extend .test;
// }
// span {
//     @extend .test;
// }
//占位%
// %pa {
//     position: abosulte;
//     top: 50%;
//     left: 50%;
// }
// div {
//     @extend %pa;
// }
// span {
//     @extend %pa;
// }
// div {
//     @if 1+1<2 {
//         border: 1px solid;
//     }
// }